<template>
    <view class="page">
        <view class="user-info-box">
            <view v-if="!hasLogin" class="not-login">
                <image class="avatar" :src="defaultAvatarUrl" mode="aspectFit"></image>
                <button class="login-btn" @click="handleLogin">微信登录</button>
            </view>
            <view v-else class="user-info">
                <image class="avatar" :src="userInfo.avatarUrl || defaultAvatarUrl" mode="aspectFit"></image>
                <text class="nickname">{{userInfo.nickName || '微信用户'}}</text>
            </view>
        </view>

        <view class="menu-list">
            <view class="menu-item" @click="handleFeedback">
                <text class="menu-text">意见反馈</text>
                <text class="arrow">></text>
            </view>
            <view class="menu-item" @click="handleOpenSetting">
                <text class="menu-text">设置</text>
                <text class="arrow">></text>
            </view>
            <view class="menu-item">
                <text class="menu-text">版本号</text>
                <text class="version">v1.0.0</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 响应式数据
const userInfo = ref({})
const hasLogin = ref(false)
const defaultAvatarUrl = '/static/images/default-avatar.png'

// 登录处理
const handleLogin = async () => {
    try {
        // 获取用户信息
        const [loginErr, loginRes] = await uni.login({ provider: 'weixin' })
        if (loginErr) {
            throw new Error('登录失败')
        }

        // 获取用户信息
        const [profileErr, profileRes] = await uni.getUserProfile({
            desc: '用于完善会员资料',
            lang: 'zh_CN'
        })
        if (profileErr) {
            throw new Error('获取用户信息失败')
        }

        // 更新用户信息
        userInfo.value = {
            nickName: profileRes.userInfo.nickName,
            avatarUrl: profileRes.userInfo.avatarUrl
        }
        hasLogin.value = true

        // 保存到本地存储
        uni.setStorageSync('userInfo', userInfo.value)
        uni.showToast({
            title: '登录成功',
            icon: 'success'
        })
    } catch (error) {
        console.error('登录失败:', error)
        uni.showToast({
            title: error.message || '登录失败',
            icon: 'none'
        })
    }
}

// 检查登录状态
const checkLoginStatus = () => {
    try {
        const storageUserInfo = uni.getStorageSync('userInfo')
        if (storageUserInfo) {
            userInfo.value = storageUserInfo
            hasLogin.value = true
        }
    } catch (error) {
        console.error('获取存储的用户信息失败:', error)
    }
}

// 意见反馈
const handleFeedback = () => {
    try {
        uni.navigateTo({
            url: '/pages/feedback/index'
        })
    } catch (error) {
        uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
        })
    }
}

// 打开设置
const handleOpenSetting = () => {
    uni.openSetting({
        success: (res) => {
            console.log('设置页面打开成功')
        },
        fail: () => {
            uni.showToast({
                title: '打开设置失败',
                icon: 'none'
            })
        }
    })
}

// 页面加载时检查登录状态
onMounted(() => {
    checkLoginStatus()
})
</script>

<style>
.page {
    min-height: 100vh;
    background-color: #f8f8f8;
}

.user-info-box {
    background-color: #ffffff;
    padding: 40rpx;
    margin-bottom: 20rpx;
}

.not-login, .user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.avatar {
    width: 128rpx;
    height: 128rpx;
    border-radius: 50%;
    margin-bottom: 20rpx;
}

.login-btn {
    margin-top: 20rpx;
    background-color: #07c160;
    color: #ffffff;
    font-size: 28rpx;
    padding: 12rpx 40rpx;
    border-radius: 40rpx;
}

.nickname {
    font-size: 32rpx;
    color: #333333;
}

.menu-list {
    background-color: #ffffff;
}

.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 40rpx;
    border-bottom: 1rpx solid #f5f5f5;
}

.menu-text {
    font-size: 30rpx;
    color: #333333;
}

.arrow {
    color: #cccccc;
    font-size: 30rpx;
}

.version {
    font-size: 28rpx;
    color: #999999;
}
</style>